<template>
  <a-card>
    <!-- 查询表单 -->
    <search-form :loading="loading" multi-rows @search="toQuery" :downloadLoading="downloadLoading" @download="toQuery" v-slot="{ advanced }">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="规则编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-select placeholder="请选择">
              <a-select-option value="1">关闭</a-select-option>
              <a-select-option value="2">运行中</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="调用次数" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input-number style="width: 100%" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 查询表单 多行 隐藏展示 -->
      <a-row v-if="advanced" :gutter="16">
        <a-col :span="8">
          <a-form-item label="更新日期" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-date-picker style="width: 100%" placeholder="请输入更新日期" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="使用状态" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-select placeholder="请选择">
              <a-select-option value="1">关闭</a-select-option>
              <a-select-option value="2">运行中</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="描述" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <!-- 使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 v-decorator 注册过了。 -->
            <!-- v-decorator="[id, options]" -->
            <a-input v-decorator="['PQ_name_LIKE']" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </search-form>

    <!-- table 上 操作按钮 -->
    <div class="table-operations">
      <a-button type="primary" @click="onAdd()">新建</a-button>
      <a-button>批量操作</a-button>
      <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
          <a-menu-item key="delete">删除</a-menu-item>
          <a-menu-item key="audit">审批</a-menu-item>
        </a-menu>
        <a-button>
          更多操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table -->
    <a-table bordered :loading="loading" :columns="columns" :rowKey="(record) => record.id" :dataSource="data" @change="handleTableChange" :pagination="pagination">
      <!-- table column 特殊处理 -->
      <template v-slot:icon="icon">
        <a-icon :type="icon" />
        {{ icon }}
      </template>
      <template v-slot:hideInMenu="hide">{{ hide === 0 ? '否' : '是' }}</template>
      <template v-slot:path="path">
        <a-tag color="purple">{{ path }}</a-tag>
      </template>
      <template v-slot:component="component">
        <a-tag color="blue">{{ component }}</a-tag>
      </template>
      <template v-slot:url="url">
        <a-tag color="#87d068">{{ url }}</a-tag>
      </template>
      <!-- table-row-operatiin -->
      <template v-slot:operation="record">
        <div class="table-row-operations">
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;" @click="onEdit(record)">Edit</a>
          <a-popconfirm v-permission="{ meta: $route.meta, permissionCode: 'DELETE' }" title="Sure to delete?" @confirm="() => onDelete(record)">
            <a href="javascript:;">Delete</a>
          </a-popconfirm>
          <a v-if="!record.children && record.url" href="javascript:;" @click="onFuns(record)">Funs</a>
        </div>
      </template>
    </a-table>

    <!-- modal form -->
  </a-card>
</template>
<script>
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: 'Icon',
    dataIndex: 'icon',
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: '菜单隐藏',
    dataIndex: 'hideInMenu',
    scopedSlots: { customRender: 'hideInMenu' }
  },
  {
    title: '前端路由',
    dataIndex: 'path',
    scopedSlots: { customRender: 'path' }
  },
  {
    title: '组件',
    dataIndex: 'component',
    scopedSlots: { customRender: 'component' }
  },
  {
    title: '排序',
    dataIndex: 'seq',
    sorter: true
  },
  {
    title: 'API地址',
    dataIndex: 'url',
    scopedSlots: { customRender: 'url' }
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

import initData from '@/mixins/initData'
import permission from '@/directive/permission' // 权限判断指令
import SearchForm from '@/components/tool/SearchForm'

export default {
  name: 'Demo',
  components: { SearchForm },
  directives: { permission },
  mixins: [initData],
  data() {
    return {
      // pageView 展示内容
      title: '展示页详情',
      desc: '展示页,展示所有功能Demo。',
      extraImage: 'https://win-admin.oss-cn-shanghai.aliyuncs.com/eac41fe8-c263-4724-b80b-dc48460693d6tp.jpg',
      linkList: [{ href: 'www.baidu.com', icon: 'github', title: '百度' }],
      //当前 组件
      columns,
      pagination: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: {},
  methods: {
    beforeInit() {
      // ajax query
      this.url = 'oauth/module/getTree'
      this.params = { sort: this.sort, ...this.query }
      return true
    },
    handleMenuClick(e) {
      if (e.key === 'delete') {
        // this.remove()
      }
    }
  }
}
</script>
